<template>
  <view>
    <!-- 自定义导航栏 -->
    <uni-nav-bar backgroundColor="#fff" :fixed="true" :border="false" :statusBar="true"
      style="border-bottom: 1px solid #f6f6f6;">
      <view class="display-default navBar-title">
        <view class="display-default navBar-title-left-text"
          :style="navBarIndexAndSwiperIndex == 0 ? 'color: #000;' : ''" @click="navBarTitleItemClick(0)">正文</view>
        <view class="display-default navBar-title-left-text"
          :style="navBarIndexAndSwiperIndex == 1 ? 'color: #000;' : ''" @click="navBarTitleItemClick(1)">评论</view>
        <!-- 下边框滑动效果 -->
        <view class="slide" :style="move"></view>
      </view>
      <template v-slot:left>
        <view class="display-default navBar-title-right-item" style="margin-left: -10rpx;"
          @click="navBarLeftItemClick()">
          <image class="navBar-title-right-icon" src="../../static/pressDetail/back.png"></image>
        </view>
      </template>
      <!--  <template v-slot:right>
        <view class="display-default" style="height: 100%;">
          <view class="display-default navBar-title-right-item" @click="navBarRightItemClick('search')">
            <image class="navBar-title-right-icon" src="../../static/myIndex/search.svg"></image>
          </view>
          <view class="display-default navBar-title-right-item" style="margin-right: -10rpx;"
            @click="navBarRightItemClick('message')">
            <image class="navBar-title-right-icon" src="../../static/myCenter/message.svg"></image>
          </view>
        </view>
      </template> -->
    </uni-nav-bar>

    <!-- 内容主体 -->
    <swiper :style="{'height': swiperHeight}" class="swiper" :indicator-dots="false" :autoplay="false" :duration="150"
      :current="navBarIndexAndSwiperIndex" @change="currentChange">
      <!-- 正文 -->
      <swiper-item>
        <view id="oneDom">
          <view id="overlookOneDom">
            <!-- 页面头部 -->
            <view class="page-header">
              <view class="display-default press-item-top">
                <!-- 用户头像 -->
                <image class="press-item-top-avatar"
                  :src="press.avatar ? $url+press.avatar : '/static/myCenter/defaultAvatar.png'"></image>
                <!-- 用户昵称和发布时间 -->
                <view class="press-item-top-userNameAndPublishDate">
                  <!-- 用户昵称 -->
                  <view class="display-default">
                    <text class="press-item-top-userName">{{press.username}}</text>
                    <image style="width: 35rpx;height: 35rpx;margin-left: 10rpx;" v-if="press.username == '校园生活服务平台开发者'"
                      src="/static/myIndex/authentication.png"></image>
                  </view>
                  <!-- 咨询分类 -->
                  <view style="color: #7e7e7e;font-size: 11px;">
                    <text>
                      {{press.publishDateInterval}}
                      <!-- 格式化后的发布时间 -->
                    </text>

                    <uni-dateformat v-if="!press.publishDateInterval" :date="press.publishDate" format="yyyy-MM-dd">
                    </uni-dateformat>

                    <text>·{{press.publishProvince}}</text>
                  </view>
                </view>
              </view>

              <!-- 咨询分类图标、名称 -->
              <view class="press-consult-imgAndName">
                <!-- 咨询分类图标 -->
                <image class="press-consultImage" :src="$url+press.consultImage"></image>
                <!-- 咨询分类名称 -->
                <text class="press-consultName">{{press.consultName}}</text>
              </view>

              <!-- 咨询内容文字 -->
              <view class="press-content">{{press.content}}</view>
              <!-- 咨询内容图片 -->
              <view class="display-default pressImage-list">
                <image class="pressImage-item" v-for="(items,index) in press.pressImagesList" :key="index"
                  :src="$url+items" mode="widthFix" :style="press.imgStyleList[index]"
                  @click="previewImage(items,press.pressImagesList,index)">
                </image>
              </view>

              <!-- 点赞、踩 -->
              <view class="press-giveAndTrample">
                <!-- 赞 -->
                <view class="display-default press-give-trample-box"
                  :style="press.likeStatus == '1' ? 'color:#000;' : ''" @click="pressLike(press.pressId)">
                  <image class="press-give-img"
                    :src="press.likeStatus == '1' ? '/static/pressDetail/like_after.svg' : '/static/myIndex/give.svg'">
                  </image>
                  <text style="margin-right: 15rpx;" v-text="press.likeStatus == '1' ? '已赞' : '赞'"></text>
                  <text>{{press.likeStatus == '1' ? press.likeNum : press.likeNum}}</text>
                </view>
                <!-- 踩 -->
                <!-- <view class="display-default press-give-trample-box">
                <image class="press-trample-img" src="/static/myIndex/give.svg"></image>
              </view> -->
              </view>
            </view>

            <!-- 分割线 -->
            <view class="halving-line"></view>

            <!-- 联系方式 -->
            <view style="padding: 25rpx;" v-if="press.wxNumber || press.qqNumber || press.phoneNumber">
              <!-- 头部标题 -->
              <view>
                <text style="font-size: 16px;font-weight: 700;">联系方式</text>
              </view>

              <!-- 内容主体 -->
              <view class="relation-box">
                <!-- 微信号 -->
                <view v-if="press.wxNumber" class="display-default relation-item" style="">
                  <text class="relation-item-title">微信号：</text>
                  <text class="relation-item-value">{{press.wxNumber}}</text>
                </view>
                <!-- QQ号 -->
                <view v-if="press.qqNumber" class="display-default relation-item">
                  <text class="relation-item-title">QQ号：</text>
                  <text class="relation-item-value">{{press.qqNumber}}</text>
                </view>
                <!-- 手机号 -->
                <view v-if="press.phoneNumber" class="display-default relation-item">
                  <text class="relation-item-title">手机号：</text>
                  <text class="relation-item-value">{{press.phoneNumber}}</text>
                </view>
              </view>
            </view>

            <!-- 分割线 -->
            <view class="halving-line"></view>

            <!-- 评论 -->
            <view class="comment-list">
              <view class="comment-top-title">
                <!-- 评论条数 -->
                <view class="display-default commentNum">
                  <view class="commentNum-text">评论</view>
                  <text>{{press.commentNum}}</text>
                </view>
                <!-- 评论排序：热门-正序-倒序 -->
                <view class="display-default commentHot" @click="popupOpen('commentHotPopup')">
                  <image style="height: 38rpx;width: 38rpx;" src="/static/pressDetail/sort.png"></image>
                  <text> {{commentHotSelectName}}</text>
                </view>
              </view>

              <!-- 评论item -->
              <view class="comment-item" v-for="(item,index) in commentList" :key="index"
                @click="commentItemClick(item.commentId)">
                <view class="display-default comment-item-top">
                  <view class="display-default" style="height: 100%;">
                    <!-- 用户头像 -->
                    <image class="comment-item-top-avatar"
                      :src="item.avatar ? $url+item.avatar : '/static/myCenter/defaultAvatar.png'"></image>
                    <!-- 用户昵称和发布时间 -->
                    <view class="comment-item-top-userNameAndPublishDate">
                      <!-- 用户昵称 -->
                      <text class="comment-item-top-userName">{{item.username}}</text>
                      <!-- 咨询分类 -->
                      <view style="color: #7e7e7e;font-size: 11px;">
                        <text>
                          {{item.commentDateInterval}}
                        </text>
                        <!-- 格式化后的发布时间 -->
                        <uni-dateformat v-if="!item.commentDateInterval" :date="item.commentDate" format="yyyy-MM-dd">
                        </uni-dateformat>

                        <text>·{{item.commentProvince}}</text>
                      </view>
                    </view>
                  </view>
                  <!-- 评论点赞 -->
                  <!-- <view class="display-default comment-give" @click="commentGiveClick(item.commentId)"> -->
                    <!-- 点赞图标 -->
                    <!-- <image class="comment-give-img" src="/static/myIndex/give.svg" mode=""></image> -->
                    <!-- 点赞数 -->
                    <!-- <text>{{item.likeNum}}</text> -->
                  <!-- </view> -->
                </view>
                <!-- 评论内容 -->
                <view class="comment-content">
                  <!-- 文字 -->
                  <text style="font-size: 16px;">{{item.content}}</text>
                  <!-- 图片 -->
                  <view class="display-default commentImage-list" @click.stop="!commentItemClick">
                    <image class="commentImage-item" v-for="(items,index) in item.commentImagesList" :key="index"
                      :src="$url+items" mode="aspectFill" @click="previewImage(items,item.commentImagesList,index)">
                    </image>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 共有3种状态选择： -->
          <!-- more：刷新前状态 -->
          <!-- loading：刷新中状态 -->
          <!-- noMore：无数据时的状态 -->
          <uni-load-more style="position: relative;top: 0;left: 0;right: 0;bottom: 0;margin: auto;height: 100rpx;"
            :style="oneDomBottom" :status="loadStatus" iconType="circle"></uni-load-more>
        </view>
      </swiper-item>

      <!-- 评论 -->
      <swiper-item>
        <view id="twoDom">
          <view id="overlookTwoDom">
            <!-- 评论 -->
            <view class="comment-list">
              <view class="comment-top-title">
                <!-- 评论条数 -->
                <view class="display-default commentNum">
                  <view class="commentNum-text">评论</view>
                  <text>{{press.commentNum}}</text>
                </view>
                <!-- 评论排序：热门-正序-倒序 -->
                <view class="display-default commentHot" @click="popupOpen('commentHotPopup')">
                  <image style="height: 38rpx;width: 38rpx;" src="/static/pressDetail/sort.png" mode=""></image>
                  <text> {{commentHotSelectName}}</text>
                </view>
              </view>

              <!-- 评论item -->
              <view class="comment-item" v-for="(item,index) in commentList" :key="index"
                @click="commentItemClick(item.commentId)">
                <view class="display-default comment-item-top">
                  <view class="display-default" style="height: 100%;">
                    <!-- 用户头像 -->
                    <image class="comment-item-top-avatar"
                      :src="item.avatar ? $url+item.avatar : '/static/myCenter/defaultAvatar.png'"></image>
                    <!-- 用户昵称和发布时间 -->
                    <view class="comment-item-top-userNameAndPublishDate">
                      <!-- 用户昵称 -->
                      <text class="comment-item-top-userName">{{item.username}}</text>
                      <!-- 咨询分类 -->
                      <view style="color: #7e7e7e;font-size: 11px;">
                        <text>
                          {{item.commentDateInterval}}
                          <!-- 格式化后的发布时间 -->
                        </text>

                        <uni-dateformat v-if="!item.commentDateInterval" :date="item.commentDate" format="yyyy-MM-dd">
                        </uni-dateformat>

                        <text>·{{item.commentProvince}}</text>
                      </view>
                    </view>
                  </view>
                  <!-- 评论点赞 -->
                  <view class="display-default comment-give">
                    <!-- 点赞图标 -->
                    <image class="comment-give-img" src="/static/myIndex/give.svg" mode=""></image>
                    <!-- 点赞数 -->
                    <text>{{item.likeNum}}</text>
                  </view>
                </view>
                <!-- 评论内容 -->
                <view class="comment-content">
                  <!-- 文字 -->
                  <text style="font-size: 16px;">{{item.content}}</text>
                  <!-- 图片 -->
                  <view class="display-default commentImage-list" @click.stop="!commentItemClick">
                    <image class="commentImage-item" v-for="(items,index) in item.commentImagesList" :key="index"
                      :src="$url+items" mode="aspectFill" @click="previewImage(items,item.commentImagesList,index)">
                    </image>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 共有3种状态选择： -->
          <!-- more：刷新前状态 -->
          <!-- loading：刷新中状态 -->
          <!-- noMore：无数据时的状态 -->
          <uni-load-more
            style="position: relative;top: 0;left: 0;right: 0;bottom: 0;margin: auto;height: 100rpx;padding-top: 50rpx;"
            :style="twoDomBottom" :status="loadStatus" iconType="circle"></uni-load-more>
        </view>
      </swiper-item>
    </swiper>

    <view class="commentValue">
      <uni-easyinput v-model="commentValue" type="textarea" :trim="true" :autoHeight="true"
        :placeholder="`评论(已有${press.commentNum}条评论)`" placeholderStyle="font-size:14px" :inputBorder="false" />
      <button class="commentValue_button" :disabled="commentValue == '' ? true : false" type="primary" size="mini"
        @click="commentValueClick">发送</button>
    </view>

    <!-- 评论热门选项弹出层 -->
    <uni-popup ref="commentHotPopup" type="bottom">
      <view class="commentHot-popup-body">
        <view class="display-default select-hot-item" :style="commentHotSelectValue == 0 ? '' : 'color:#6d6d6d'"
          @click="commentHotSelect(0)">
          热门 <uni-icons v-show="commentHotSelectValue == 0" style="position: absolute;right: 70rpx;"
            custom-prefix="iconfont" type="checkmarkempty" size="20"></uni-icons>
        </view>
        <view class="display-default select-hot-item" :style="commentHotSelectValue == 1 ? '' : 'color:#6d6d6d'"
          @click="commentHotSelect(1)">
          正序<uni-icons v-show="commentHotSelectValue == 1" style="position: absolute;right: 70rpx;"
            custom-prefix="iconfont" type="checkmarkempty" size="20"></uni-icons>
        </view>
        <view class="display-default select-hot-item" :style="commentHotSelectValue == 2 ? '' : 'color:#6d6d6d'"
          @click="commentHotSelect(2)">
          倒序<uni-icons v-show="commentHotSelectValue == 2" style="position: absolute;right: 70rpx;"
            custom-prefix="iconfont" type="checkmarkempty" size="20"></uni-icons>
        </view>
        <button class="commentHot-button-cancel" @click="popupClose('commentHotPopup')">取消</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 标题栏是否固定
        fixed: true,
        // 顶部标题栏索引id And 当前轮播图滑块所在的id
        navBarIndexAndSwiperIndex: 0,
        // 咨询排序下边框样式，动态
        move: 'left:45rpx',
        // 预设的swiper高度， 100vh屏幕高度
        swiperHeight: '100vh',
        // 评论热门选择弹出框，默认为热门！
        commentHotSelectValue: 0,
        // 评论界面显示热门选择字段
        commentHotSelectName: '热门',
        pageNum: 1, // 页码
        pageSize: 10, // 每页显示的数量
        commentTotal: 0, // 咨询的总条数
        isLoading: false, // isLoading:同步数据请求（限制同时只能有一次数据请求）
        isPressLike: false, // isPressLike:点赞的同步数据请求（限制同时只能有一次数据请求）
        // 咨询列表信息
        press: {},
        // 评论内容
        commentValue: '',
        // 评论图片
        contentImages: '',
        // 评论省区位置信息
        commentProvince: '',
        // 底部load刷新的状态
        loadStatus: 'more',
        // 评论列表信息
        commentList: [],
        // 屏幕高度 - 正文高度 = 这是剩下的高度
        oneDomBottom: 'padding-bottom:50px',
        // 屏幕高度 - 评论高度 = 这是剩下的高度
        twoDomBottom: 'padding-bottom:50px',
        token: ''
      };
    },
    async onLoad(e) {
      // uni.showLoading({
      //   title: '正在加载中...'
      //   mask: true
      // })
      this.loadStatus = 'loading'
      this.token = await uni.getStorageSync('token')

      // 获取当前省份信息
      uni.getLocation({
        type: "gcj02",
        geocode: true,
        success: (res) => {
          // 获取 湖南省 字符串
          let province = res.address.province

          // 从索引为0的位置，截取province.length - 1个长度返回
          this.commentProvince = province.slice(0, province.length - 1);
        }
      })

      // 临时数据存储
      let tempPress = []

      await this.$http.press.getPressInfoByPressId(this.token, e.pressId).then(res => {
        // console.log("res: " + JSON.stringify(res));

        if (res.code == 401) {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            position: 'center'
          })
          if (res.msg == '话题已删除') {
            // 取消正在加载的加载框
            uni.hideLoading()
            // 向上级页面携带返回消息体
            uni.setStorageSync('isPressDetail', true)
            //返回上一页面
            uni.navigateBack({
              delta: 1
            })
          }
          return
        }
        if (!res.code) {
          uni.showToast({
            title: '服务器开小差了',
            icon: 'none',
            position: 'center'
          });
          return
        }

        let data = res.data // 根据用户token存緩存
        let isAppear = false // 缓存中的数据是否有包含
        let items = uni.getStorageSync(this.token + "pressList") || [] // 没有pressList则新建
        console.log("存入缓存：", data.pressId);

        for (let i = 0; i < items.length; i++) {
          // 查看缓存中的数据是否有包含
          if (items[i].pressId == data.pressId) {
            // 如果有则把该数据移动到顶部
            items.unshift(items.splice(i, 1)[0]); // unshift()和splice()方法都会改变原始数组
            // 找到了可以退出循环了
            isAppear = true
            break;
          }
        }

        if (!isAppear) {
          // 缓存中没有则添加
          items.unshift(data) //添加到数组顶部
          if (items.length > 20) {
            items.pop() //大于20条删除底部那条
          }
        }
        uni.setStorageSync(this.token + "pressList", items) //存到缓存

        tempPress = res.data
      }).catch(err => {
        console.log("err: " + JSON.stringify(err));
      })

      await this.formatPressImg(tempPress)

      this.commentTotal = this.press.commentNum || 0 // 将评论总数存入    

      await this.getCommentByPressId(this.press.pressId, this.pageNum, this.pageSize)

      await this.setSwiperHeight('#oneDom', 3000) // 导航栏正文节点#oneDom，默认第一个加载

      // uni.hideLoading()
    },
    async onShow() {
      // 当页面显示时监听用户是否登录
      this.token = await uni.getStorageSync('token')

      // 如果为登陆状态需要重新获取likeStatus用户是否点赞的字段数据
      if (this.token && this.press.pressId) {
        console.log(this.token, this.press.pressId);

        await this.$http.press.getPressInfoByPressId(this.token, this.press.pressId).then(res => {
          // console.log("res: " + JSON.stringify(res));
          this.press.likeStatus = res.data.likeStatus
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })
      }
    },
    async onPullDownRefresh() {
      uni.showLoading({
        title: '正在加载中...'
      })
      // 重置一些重要的相关数据数据
      this.loadStatus = 'loading'
      this.pageNum = 1
      this.commentValue = ''
      // this.commentHotSelectValue
      // 重新调用方法进行获取
      await this.getSwiperList()
      await this.getConsultList()
      await this.getPressListByMore('', '0', 1, 5)
      this.setSwiperHeight('#twoDom') // 热门导航栏节点#oneDom，推荐导航页节点#twoDom
      console.log("已刷新");

      // 关闭下拉刷新
      uni.stopPullDownRefresh()
      // 关闭节流阀，这里必须要设置延迟500ms-因为关闭下拉刷新有个延迟。
      // 关闭了之后要过一会才能开启
      setTimeout(() => {
        this.isTabItem = true
      }, 500)

      uni.hideLoading()
    },
    async onReachBottom() {
      // 1.判断是否正在加载其他数据请求
      if (this.isLoading) return
      // 2.页码数(pageNum) * 每页数据(pageSize) >= 总数(commentTotal) 以防溢出多余的网络请求，消耗资源
      if (this.pageNum * this.pageSize >= this.commentTotal) {
        return uni.showToast({
          title: '没有更多数据了',
          icon: 'none',
          position: 'center'
        });
      }
      this.loadStatus = 'loading'
      this.pageNum += 1;

      await this.getCommentByPressId(this.press.pressId, this.pageNum, this.pageSize)

      if (this.navBarIndexAndSwiperIndex == 0) {
        this.setSwiperHeight('#oneDom')
      } else {
        this.setSwiperHeight('#twoDom')
      }
    },
    methods: {
      /**
       * @deprecated 根据pressId获取咨询详情
       */
      getPressByPressId() {

      },

      /**
       * @description 格式化press图片宽高自适应
       * @param 临时数据存储，免得数据回显太快，或者数据还未更新
       */
      async formatPressImg(tempPress) {
        await new Promise((resolve, reject) => {
          if (tempPress.pressImagesList != "" && tempPress.pressImagesList != null) {
            let imgStyleList = []

            // 获取图片实际宽度，自适应宽高-同步操作 
            for (let i = 0; i < tempPress.pressImagesList.length; i++) {
              // await new Promise((resolve, rehect) => {
              uni.getImageInfo({
                src: this.$url + tempPress.pressImagesList[i],
                success: (res) => {
                  // console.log("res: " + JSON.stringify(res));
                  imgStyleList.push(`width:${res.width}px;`)
                  // console.log("返回");
                  this.setSwiperHeight('#oneDom') // 导航栏正文节点#oneDom，默认第一个加载
                }
              })
              // })
            }

            tempPress.imgStyleList = imgStyleList
            this.press = tempPress
          } else {
            this.press = tempPress
          }
          return resolve()
        })
      },

      /**
       * @description 获取咨询详情页评论列表，默认获取全部
       * @param pressId 咨询编号id
       * @param pageNum 页码
       * @param pageSize 每页显示的数量
       */
      async getCommentByPressId(pressId, pageNum, pageSize) {
        // 同步（锁定该数据请求，无法被上拉触底函数调用）
        this.isLoading = true

        await this.$http.comment.getCommentInfoByPressId(pressId, pageNum, pageSize).then(res => {
          // console.log("res: " + JSON.stringify(res));

          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'

            })
            return
          }
          if (!res.code) {
            // 服务器错误，获取不到数据
            uni.showToast({
              title: '服务器开小差了！',
              icon: 'none',
              position: 'center'
            })
            return
          }

          if (res.code == 200) this.commentList = this.commentList.concat(res.data)
        }).catch(err => {
          console.log("res: " + JSON.stringify(res));
        })

        this.isLoading = false
      },

      /**
       * @description 咨询点赞
       * @param pressId 咨询id
       */
      async pressLike(pressId) {
        console.log("pressId: ", pressId);
        // 限流阀，同一时间只能调用一次
        if (this.isPressLike) return
        this.isPressLike = true
        // 检查是否为登陆状态
        if (this.token) {
          // 检查是否为未点赞状态
          if (this.press.likeStatus == '0') {
            await this.$http.press.pressLike(this.token, pressId).then(res => {
              console.log("res: " + JSON.stringify(res));

              this.press.likeStatus = '1'
              this.press.likeNum++
            }).catch(err => {
              console.log("err: " + JSON.stringify(err));
            })
          } else {
            await this.$http.press.pressCancelLike(this.token, pressId).then(res => {
              console.log("res: " + JSON.stringify(res));

              this.press.likeStatus = '0'
              this.press.likeNum--
            }).catch(err => {
              console.log("err: " + JSON.stringify(err));
            })

          }
        } else {
          uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=该功能需要登录后使用，是否登录？&confirmText=去登录&type=login"
          })
        }

        this.isPressLike = false
      },

      /**
       * @description 评论点赞
       * @param commentId 评论id
       */
      // commentGiveClick(commentId) {
      //   console.log(commentId);
      // },

      /**
       * @description 顶部导航栏[正文、评论]swiper的滑动时触发事件
       * @param e current值改变时返回的值
       */
      currentChange(e) {
        if (e.detail.current == 0) {
          this.setSwiperHeight('#oneDom')
        } else {
          this.setSwiperHeight('#twoDom')
        }
        this.navBarIndexAndSwiperIndex = e.detail.current
        this.move = 'left:' + (150 * e.detail.current + 45) + 'rpx;'

        if (this.commentList.length == 0) {

        }
      },

      /**
       * @description 获取顶部标题栏[正文、评论]点击时触发事件
       * @param index [正文、评论]点击时的索引
       */
      navBarTitleItemClick(index) {
        // sort排序类别-下边框滑动效果
        this.move = 'left:' + (150 * index + 45) + 'rpx;'

        if (index == 0) {
          this.setSwiperHeight('#oneDom')
        } else {
          this.setSwiperHeight('#twoDom')
        }
        this.navBarIndexAndSwiperIndex = index
      },

      /**
       * @description 获取顶部标题栏返回按钮点击时触发事件
       */
      navBarLeftItemClick() {
        uni.navigateBack()
      },

      /**
       * @description 传入popup弹窗的ref，打开该弹窗
       * @param popupRef 需要打开弹窗的ref
       */
      popupOpen(popupRef) {
        if (popupRef == 'commentHotPopup')
          // 打开评论的热门选项弹出框
          this.$refs.commentHotPopup.open()
      },

      /**
       * @description 评论的热门选项弹出层，共有3个选项【热门、正序、倒序】
       * @param index 选项的索引
       */
      commentHotSelect(index) {
        this.commentHotSelectValue = index
        if (index == 0) {
          this.commentHotSelectName = '热门'
          this.commentList.sort(function(a, b) {
            let aDate = new Date(a.commentDate).getTime()
            let bDate = new Date(b.commentDate).getTime()
            return aDate - bDate
          })
        }
        if (index == 1) {
          this.commentHotSelectName = '正序'
          this.commentList.sort(function(a, b) {
            let aDate = new Date(a.commentDate).getTime()
            let bDate = new Date(b.commentDate).getTime()
            return aDate - bDate
          })
        }
        if (index == 2) {
          this.commentHotSelectName = '倒序'
          this.commentList.sort(function(a, b) {
            let aDate = new Date(a.commentDate).getTime()
            let bDate = new Date(b.commentDate).getTime()
            return bDate - aDate
          })
        }

        this.$refs.commentHotPopup.close()
      },

      /**
       * @description 评论item点击，@评论人，留言发表
       * @param index 评论id
       */
      commentItemClick(commentId) {
        console.log("评论点击:" + commentId);
      },

      /**
       * @description 预览多张图片Item点击
       */
      previewImage(imgUrl, imgList, index) {
        let formatImgList = []
        let formatImgUrl = this.$url + imgUrl

        for (let i = 0; i < imgList.length; i++) {
          formatImgList.push(this.$url + imgList[i])
        }

        uni.previewImage({
          urls: formatImgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
          current: formatImgUrl // 当前显示图片的http链接，默认是第一个
        })
      },

      /**
       * @description 发表评论
       */
      async commentValueClick() {
        // 检查是否为登陆状态
        if (this.token) {

          if (!this.commentValue) {
            uni.showToast({
              title: '内容不能为空！',
              icon: 'none',
              position: 'center'
            })
            return
          }

          // 显示Loading提示框
          uni.showLoading({
            title: '正在提交...',
            mask: false
          })

          // 判断发布省区是否为空，为空就自动赋值为 未知
          if (!this.commentProvince) {
            this.commentProvince = '未知'
          }

          let comment = {
            "pressId": this.press.pressId,
            "content": this.commentValue,
            "contentImages": this.contentImages,
            "commentProvince": this.commentProvince
          }

          await this.$http.comment.publishComment(this.token, comment).then(res => {
            console.log("res: " + JSON.stringify(res));

            if (res.code == 401) {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                position: 'center'
              })
              return
            }
            if (!res.code) {
              uni.showToast({
                title: '服务器开小差了',
                icon: 'none',
                position: 'center'
              })
              return
            }

            uni.showToast({
              title: '发表成功',
              icon: 'none',
              position: 'center'
            });
          }).catch(err => {
            console.log("err: " + JSON.stringify(err));
          })

          // 清除评论输入框数据
          this.commentValue = ''
          // 清除评论数据
          this.commentList = []
          // 评论总数++
          this.press.commentNum++
          // 重新获取评论数据
          this.pageNum = 1
          await this.getCommentByPressId(this.press.pressId, this.pageNum, this.pageSize)

          // 刷新页面
          if (this.navBarIndexAndSwiperIndex == 0) {
            this.setSwiperHeight('#oneDom')
          } else {
            this.setSwiperHeight('#twoDom')
          }

          // 隐藏Loading提示框
          uni.hideLoading()
        } else {
          uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=该功能需要登录后使用，是否登录？&confirmText=去登录&type=login"
          })
        }
      },

      /**
       * @description 页面加载时运行，效果是自动获取当前页面的轮播高度并自适应
       * @param element 传入一个页面节点元素[.text/#text/text]
       */
      async setSwiperHeight(element, time) {
        // 延时设置高度 -- 一定要延时，否则报错 - 300毫秒一般都够了

        // uniapp自带方法 - 获取DOM的高度等信息
        // https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery

        // 节点查询
        let query = uni.createSelectorQuery().in(this)

        // 动态将剩余的屏幕高度填满
        await new Promise((resolve, rogect) => {
          this.$nextTick(() => {
            setTimeout(() => {
              let tempDom = ''

              if (element == '#oneDom') {
                tempDom = '#overlookOneDom'
              } else {
                tempDom = '#overlookTwoDom'
              }
              query.select(tempDom).boundingClientRect(data => {
                let systemHeight = uni.getSystemInfoSync().windowHeight
                console.log("systemHeight: ", systemHeight);
                console.log("data.height: ", data.height);

                if (systemHeight - data.height > 0) {
                  if (element == '#oneDom') {
                    this.oneDomBottom = 'height:' + (systemHeight - data.height - 45 - 100) + 'px'
                    console.log("systemHeight - data.height: ", systemHeight - data.height);
                  } else {
                    this.twoDomBottom = 'height:' + (systemHeight - data.height - 45 - 100) + 'px'
                  }
                }
              }).exec(e => {
                return resolve()
              })
            }, time || 300)
          })
        })

        console.log("this.oneDomBottom: ", this.oneDomBottom);
        console.log("this.twoDomBottom: ", this.twoDomBottom);

        await new Promise((resolve, rogect) => {
          this.$nextTick(() => {
            setTimeout(() => {
              // 再设置总体高度
              query.select(element).boundingClientRect(data => {

                // console.log("【DOM尺寸信息】" + JSON.stringify(data))

                // 获取DOM的高度， 单位是像素
                let h = data.height

                // 补上单位
                h += 'px'
                // 实际高度赋值给swiper
                this.swiperHeight = h
                console.log('【动态设置高度】', h)
              }).exec(e => {
                return resolve()
              })
            }, 300)
          })
        })

        if (this.pageNum * this.pageSize >= this.commentTotal) {
          this.loadStatus = 'noMore'
        } else {
          this.loadStatus = 'more'
        }
      }
    }
  }
</script>

<style lang="scss">
  page {
    background: #fff;
  }

  // 自定义导航栏样式-1
  /deep/ .uni-navbar--fixed {
    z-index: 1;
  }

  /deep/ .uni-navbar__header-container {
    display: flex;
    justify-content: center;
    padding: 0px;
  }

  /deep/ .uni-navbar__header-btns-left {
    flex: 0.5;
  }

  /deep/ .uni-navbar__header-btns-right {
    flex: 0.5;
  }

  /deep/ .commentValue .uni-easyinput__content-textarea {
    min-height: 0px;
    margin: 10rpx 30rpx;
    padding: 15rpx;
    background: #f7f7f7;
  }

  // 导航栏样式
  .navBar-title {
    // padding-bottom: 20rpx;
    font-size: 14px;
    background: #fff;
    position: relative;
    cursor: pointer;
    display: flex;
    /* 防止滑动时 产生保留上次效果 浏览器问题*/
    overflow: hidden;
    height: 100%;

    // 自定义导航栏-2
    & .navBar-title-left-text {
      height: 100%;
      font-size: 15px;
      color: #8f8f8f;
      width: 150rpx;
      transition-property: font-size;
      transition-duration: 0.1s;
      transition-timing-function: ease-in;
    }

    // sort排序类别-下边框
    & .slide {
      position: absolute;
      left: 0;
      bottom: 0rpx;
      width: 2em;
      height: 6rpx;
      // background: #023d99;
      background: #000;
      transition: all .2s;
    }
  }

  .navBar-title-right-item {
    height: 100%;
    width: 80rpx;

    & .navBar-title-right-icon {
      width: 45rpx;
      height: 45rpx;
    }
  }

  // 页面头部
  .page-header {
    padding: 25rpx 25rpx 70rpx 25rpx;

    // 内容头部
    & .press-item-top {
      height: 80rpx;
      // margin-bottom: 20rpx;
      justify-content: flex-start;

      // 头像
      & .press-item-top-avatar {
        width: 80rpx;
        height: 100%;
        border-radius: 60px;
        margin-right: 25rpx;
        background: #fff;
      }

      // 用户昵称和发布时间的容器
      & .press-item-top-userNameAndPublishDate {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;

        // 用户昵称
        & .press-item-top-userName {
          font-size: 17px;
          // font-weight: 700;
        }
      }
    }

    // 咨询分类图标、名称
    & .press-consult-imgAndName {
      display: flex;
      align-items: center;
      background: #f6f7f7;
      padding: 5rpx 15rpx;
      margin: 25rpx 0;
      // 这个可以使view块级元素根据内容自适应宽度
      width: fit-content;
      width: -webkit-fit-content;
      width: -moz-fit-content;

      // 咨询分类图标
      & .press-consultImage {
        width: 42rpx;
        height: 42rpx;
        margin-right: 10rpx;
      }

      // 咨询分类名称
      & .press-consultName {
        font-size: 12px;
      }
    }

    // 咨询内容
    & .press-content {
      font-size: 16px;
      margin-bottom: 10rpx;
      word-break: break-word; //如果不想单词内断行可以进行单词间的断行
    }

    // 点赞、踩
    & .press-giveAndTrample {
      display: flex;
      align-items: center;

      // 点赞、踩的盒子
      & .press-give-trample-box {
        height: 80rpx;
        padding: 0 20rpx;
        margin-right: 10rpx;
        font-size: 14px;
        color: #7e7e7e;
        background: #f7f7f7;

        // 点赞
        & .press-give-img {
          width: 45rpx;
          height: 45rpx;
          margin-right: 15rpx;
        }

        // 踩
        & .press-trample-img {
          width: 42rpx;
          height: 42rpx;
          // 实现图片旋转180度
          -moz-transform: rotate(-180deg);
          -webkit-transform: rotate(-180deg);
        }
      }
    }

    // 咨询内容的图片list
    & .pressImage-list {
      width: 100%;
      margin-bottom: 50rpx;
      flex-direction: column;


      & .pressImage-item {
        max-width: 100%;
        margin-top: 20rpx;
        border-radius: 10rpx;
        // height: 200rpx;
      }
    }
  }

  // 分割线
  .halving-line {
    width: 100%;
    background: #f5f5f5;
    height: 10rpx;
  }

  // 评论内容输入框
  .commentValue {
    width: 100%;
    padding: 10rpx 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0px;


    & .commentValue_button {
      margin-right: 25rpx;
      border-radius: 30px;
    }
  }

  // 点击评论热门的弹出层选项
  .commentHot-popup-body {
    padding-bottom: 80rpx;
    border-radius: 10px 10px 0 0;
    background: #fff;

    & .select-hot-item {
      position: relative;
      font-size: 16px;
      padding: 30rpx;
    }

    & .commentHot-button-cancel {
      background: #eee;
      margin-top: 30rpx;
      padding: 5rpx 0;
      font-size: 16px;
      width: 90%;
    }
  }

  // 联系方式
  .relation-box {
    margin-left: 2em;
    display: flex;
    flex-direction: column;

    & .relation-item {
      margin-top: 25rpx;
      justify-content: flex-start;

      & .relation-item-title {
        font-size: 16px;
        color: #7e7e7e;
      }

      & .relation-item-value {
        font-size: 15px;
      }
    }
  }

  // 评论list
  .comment-list {

    // 评论头部-显示评论数、【热门、正序、倒序】弹出框
    & .comment-top-title {
      padding: 0 25rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      // 评论数
      & .commentNum {
        font-size: 14px;

        & .commentNum-text {
          padding: 22rpx 0 15rpx 0;
          margin-right: 10rpx;
          border-bottom: 6rpx solid #000;
        }
      }

      // 热门选项
      & .commentHot {
        font-size: 12px;
        color: #8d8d8d;
      }
    }

    // 评论item项
    & .comment-item {
      border-top: .8px solid #f5f5f5;
      padding: 25rpx;

      // 内容头部
      & .comment-item-top {
        height: 80rpx;
        // margin-bottom: 20rpx;
        justify-content: space-between;
        align-items: flex-start;

        // 用户头像
        & .comment-item-top-avatar {
          width: 80rpx;
          height: 100%;
          border-radius: 60px;
          margin-right: 25rpx;
          background: #fff;
        }

        // 用户昵称和评论时间的容器
        & .comment-item-top-userNameAndPublishDate {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;

          // 用户昵称
          & .comment-item-top-userName {
            font-size: 17px;
            // font-weight: 700;
          }
        }

        // 评论点赞
        & .comment-give {
          // height: 80rpx;
          padding: 0 20rpx;
          margin-right: 10rpx;
          font-size: 13px;
          color: #7e7e7e;

          // 点赞图标
          & .comment-give-img {
            width: 38rpx;
            height: 38rpx;
            margin-right: 15rpx;
          }
        }
      }

      // 评论内容
      & .comment-content {
        margin-top: 20rpx;
        margin-left: 80+25rpx; // 头像宽度80rpx+评论item内边距25rpx
        margin-bottom: 10rpx;
        word-break: break-word; //如果不想单词内断行可以进行单词间的断行

        // 评论图片-最多9张
        & .commentImage-list {
          flex-wrap: wrap;
          justify-content: space-between;

          & .commentImage-item {
            width: 32%;
            height: 200rpx;
          }
        }
      }
    }
  }
</style>
